Next.js — Styling Components

We can create server-side rendered React apps and static sites easily Next.js.

In this article, we’ll take a look at how to style pages with Next.js.

Built-In CSS Support

Next.js lets us import CSS from JavaScript files.

It extends import beyond the basic JavaScript usage to let us import CSS files.

We can add a global stylesheet to our project.

To do this, we just create a CSS file and import it to pages/_app.js .

So we can write:

body {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

in styles.css .

Then in pages/_app.js , we write:

import '../styles/globals.css'
import './styles.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

We added the styles.css import.

The rest of the code is generated when we created the project.

If we want to import from the node_modules folder, then we must do so inside pages/_app.js .

Adding Component-Level CSS

We can add component-level CSS in addition to global CSS.

To do this, we follow the naming convention of [name].module.css , where [name] is the component’s file name.

For example, given that we have pages/yesno.js :

function YesNo({ data }) {
  return <p>{data.answer}</p>
}

export async function getServerSideProps() {
  const res = await fetch(`https://yesno.wtf/api`)
  const data = await res.json()
  return { props: { data } }
}

export default YesNo

We can create a file called yesno.module.js with:

.yesno {
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

and then we can import it into yesno.js :

import styles from './yesno.module.css';

function YesNo({ data }) {
  return <p className={styles.yesno}>{data.answer}</p>
}

export async function getServerSideProps() {
  const res = await fetch(`https://yesno.wtf/api`)
  const data = await res.json()
  return { props: { data } }
}

export default YesNo

The yesno class in CSS is converted into the yesno property when we import it.

We use it to populate the className prop to set the class names of the elements.

CSS modules are an optional features and it’s only enabled for files with the .module.css extension.

This means we need the .module part of the file name if we want to import them as we did.

We can also use link tags as always to add our CSS files.

CSS modules are automatically concatenated and minified and code-split.

Sass Support

Next.js lets us import SASS files with the .scss and .sass extensions.

We can also use them as CSS modiles with the .module.scss and .module.sass extensions.

To use SASS in our Next.js app, we’ve install the sass package by running:

npm install sass

The SCSS syntax is an extension of the CSS syntax, SASS has an indentation syntax that’s different from CSS.

Therefore, it’s easier to work with SCSS files.

Customizing Sass Options

We can change the paths of the style files to include within the next.config.js file.

For example, we can write:

const path = require('path')

module.exports = {
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
}

to change the path of the style files we want to include.

Conclusion

We can style our Next.js app with CSS and SASS / SCSS.